<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的收藏 - 内容评级平台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        :root {
            --primary: #4361ee;
            --secondary: #3f37c9;
            --accent: #4cc9f0;
            --dark: #1d3557;
            --darker: #0d1b2a;
            --light: #f8f9fa;
            --gray: #8d99ae;
            --success: #4caf50;
            --warning: #ff9800;
            --danger: #f44336;
            --card-bg: rgba(29, 53, 87, 0.8);
            --transition: all 0.3s ease;
        }

        body {
            background: linear-gradient(135deg, var(--darker) 0%, var(--dark) 100%);
            color: var(--light);
            min-height: 100vh;
            background-attachment: fixed;
            line-height: 1.6;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
        }

        .debug-container {
            background: rgba(0,0,0,0.2);
            padding: 15px;
            margin: 20px;
            border-radius: 8px;
            color: #fff;
        }

        .debug-title {
            font-weight: bold;
            margin-bottom: 10px;
            color: var(--accent);
        }

        .debug-item {
            margin-bottom: 5px;
            font-size: 14px;
        }

        .favorites-container {
            max-width: 1200px;
            margin: 2rem auto;
            padding: 0 2rem;
        }

        .favorites-header {
            margin-bottom: 2rem;
            text-align: center;
        }

        .favorites-title {
            font-size: 2rem;
            margin-bottom: 1rem;
            color: var(--accent);
        }

        .favorites-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 2rem;
        }

        .favorite-item {
            background: var(--card-bg);
            border-radius: 15px;
            overflow: hidden;
            transition: var(--transition);
            position: relative;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .favorite-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
        }

        .favorite-image {
            width: 100%;
            height: 300px;
            object-fit: cover;
            display: block;
        }

        .favorite-info {
            padding: 1.5rem;
        }

        .favorite-type {
            background: rgba(76, 201, 240, 0.2);
            color: var(--accent);
            padding: 0.3rem 0.8rem;
            border-radius: 30px;
            font-size: 0.9rem;
            display: inline-block;
            margin-bottom: 0.8rem;
        }

        .favorite-title {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .favorite-actions {
            display: flex;
            justify-content: space-between;
            margin-top: 1.5rem;
        }

        .btn-view {
            background: var(--primary);
            color: white;
            padding: 0.6rem 1.2rem;
            border-radius: 30px;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.9rem;
        }

        .btn-view:hover {
            background: var(--secondary);
        }

        .btn-remove {
            background: transparent;
            color: var(--danger);
            border: 1px solid var(--danger);
            padding: 0.6rem 1.2rem;
            border-radius: 30px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.9rem;
        }

        .btn-remove:hover {
            background: rgba(244, 67, 54, 0.1);
        }

        .empty-favorites {
            text-align: center;
            padding: 4rem 0;
        }

        .empty-favorites i {
            font-size: 3rem;
            color: var(--gray);
            margin-bottom: 1rem;
        }

        .empty-favorites p {
            font-size: 1.2rem;
            color: var(--gray);
            margin-bottom: 1.5rem;
        }

        .favorite-message {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: var(--success);
            color: white;
            padding: 10px 20px;
            border-radius: 5px;
            z-index: 1000;
            animation: slideIn 0.3s ease;
        }

        .favorite-error {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: var(--danger);
            color: white;
            padding: 10px 20px;
            border-radius: 5px;
            z-index: 1000;
            animation: slideIn 0.3s ease;
        }

        @keyframes slideIn {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
    </style>
</head>
<body>
<%@ include file="navbar.jsp" %>

<div class="favorites-container">
    <div class="favorites-header">
        <h1 class="favorites-title">我的收藏</h1>
        <p>您收藏的所有精彩内容</p>
    </div>

    <c:choose>
        <c:when test="${not empty favoriteContents}">
            <div class="favorites-grid">
                <c:forEach items="${favoriteContents}" var="content">
                    <div class="favorite-item" data-content-id="${content.contentId}" data-content-type="${content.contentType}">
                        <img src="${content.imageUrl}" alt="${content.title}" class="favorite-image"
                             onerror="this.src='https://picsum.photos/300/450?random=${Math.random()}&text=图片加载失败'">
                        <div class="favorite-info">
                            <span class="favorite-type">
                                <c:choose>
                                    <c:when test="${content.contentType == 'movie'}">电影</c:when>
                                    <c:when test="${content.contentType == 'book'}">图书</c:when>
                                    <c:when test="${content.contentType == 'music'}">音乐</c:when>
                                    <c:otherwise>${content.contentType}</c:otherwise>
                                </c:choose>
                            </span>
                            <h3 class="favorite-title">${content.title}</h3>
                            <div class="favorite-actions">
                                <a href="content/detail?type=${content.contentType}&id=${content.contentId}" class="btn-view">
                                    <i class="fas fa-eye"></i> 查看详情
                                </a>
                                <button class="btn-remove">
                                    <i class="fas fa-trash-alt"></i> 移除
                                </button>
                            </div>
                        </div>
                    </div>
                </c:forEach>
            </div>
        </c:when>
        <c:otherwise>
            <div class="empty-favorites">
                <i class="far fa-heart"></i>
                <p>您还没有收藏任何内容</p>
                <a href="Userindex.jsp" class="btn btn-primary">浏览内容</a>
            </div>
        </c:otherwise>
    </c:choose>
</div>

<%@ include file="footer.jsp" %>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        console.log("页面加载完成，开始初始化收藏功能");

        // 调试输出收藏项数量
        console.log("找到收藏项数量: " + $('.favorite-item').length);

        // 移除收藏按钮点击事件
        $(".btn-remove").click(function() {
            const favoriteItem = $(this).closest('.favorite-item');
            const contentId = favoriteItem.data('content-id');
            const contentType = favoriteItem.data('content-type');
            const btn = $(this); // 保存按钮引用

            console.log("尝试移除收藏: ", {contentId, contentType});

            if (confirm('确定要移除该收藏吗？')) {
                // 显示加载状态
                const originalHtml = btn.html();
                btn.html('<i class="fas fa-spinner fa-spin"></i> 处理中...');
                btn.prop('disabled', true);

                $.ajax({
                    url: 'favorite',
                    type: 'POST',
                    data: {
                        action: 'remove',
                        contentId: contentId,
                        contentType: contentType
                    },
                    dataType: 'json', // 明确指定返回JSON格式
                    success: function(response) {
                        console.log("移除收藏响应: ", response);
                        console.log("响应类型: ", typeof response);

                        try {
                            if (response && response.success) {
                                console.log("移除收藏成功");
                                favoriteItem.fadeOut(300, function() {
                                    $(this).remove();
                                    // 检查是否还有收藏项
                                    if ($('.favorite-item').length === 0) {
                                        $('.favorites-grid').html(`
                                            <div class="empty-favorites">
                                                <i class="far fa-heart"></i>
                                                <p>您还没有收藏任何内容</p>
                                                <a href="Userindex.jsp" class="btn btn-primary">浏览内容</a>
                                            </div>
                                        `);
                                    }
                                });
                                showFavoriteMessage(response.message, "success");
                            } else {
                                console.error("移除收藏失败: " + (response.message || "未知错误"));
                                showFavoriteMessage(response.message || "移除失败，请稍后再试", "error");
                            }
                        } catch (e) {
                            console.error("处理响应失败: ", e);
                            showFavoriteMessage("操作失败，请稍后再试", "error");
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error("AJAX请求失败: ", status, error);
                        showFavoriteMessage("网络错误，请稍后再试", "error");
                    },
                    complete: function() {
                        // 使用保存的按钮引用恢复状态
                        btn.html(originalHtml);
                        btn.prop('disabled', false);
                    }
                });
            }
        });

        // 显示操作消息
        function showFavoriteMessage(message, type) {
            console.log("显示消息: ", type, message);

            // 移除旧消息
            $('.favorite-message, .favorite-error').remove();

            // 创建新消息
            const messageDiv = $('<div>').addClass(type === "success" ? "favorite-message" : "favorite-error")
                .text(message)
                .appendTo('body');

            // 自动消失
            setTimeout(() => {
                messageDiv.fadeOut(500, function() {
                    $(this).remove();
                });
            }, 3000);
        }

        // 图片加载失败处理
        $('.favorite-image').on('error', function() {
            $(this).attr('src', 'https://picsum.photos/300/450?random=' + Math.random() + '&text=图片加载失败');
        });
    });
</script>
</body>
</html>